<template>
  <div class="header-two">
    <div class="header-hm">
      <el-row type="flex" justify="space-between">
        <el-page-header content="添加企业" @back="fn" />
        <span style="float: right; padding: 3px 0" type="text">黑马管理员</span>
      </el-row>
    </div><br>
    <el-row type="flex" justify="center">
      <el-card class="box-card" style="width:1660px">
        <div slot="header" class="clearfix">
          <span>企业信息</span>
        </div>
        <div style="margin:20px 130px">
          <el-form ref="formRef" label-width="100px" :rules="rules" :model="formData">
            <el-row type="flex" justify="space-around">
              <el-form-item label="企业名称" prop="name">
                <el-input v-model="formData.name" placeholder="请输入企业名称" style="width:538px" />
              </el-form-item>
              <el-form-item label="法人" prop="legalPerson">
                <el-input v-model="formData.legalPerson" placeholder="请输入法人" style="width:538px" />
              </el-form-item>
            </el-row>
            <el-row type="flex" justify="space-around">
              <el-form-item label="注册地址" prop="registeredAddress">
                <el-input v-model="formData.registeredAddress" placeholder="请输入注册地址" style="width:538px" />
              </el-form-item>
              <el-form-item label="所在行业" prop="industryCode">
                <el-select v-model="formData.industryCode" placeholder="请选择所在行业" style="width:538px">
                  <el-option v-for="item in tradeList" :key="item.industryCode" :value="item.industryCode" :label="item.industryName" />
                </el-select>
              </el-form-item>
            </el-row>
            <el-form-item label="营业执照" prop="fileList">
              <el-upload
                v-model="formData.fileList"
                class="upload-demo"
                action=""
                multiple
                :http-request="imageUpload"
                :on-change="handleAvatarSuccess"
                :file-list="formData.fileList"
                :before-upload="beforeUpload"
              >
                <el-button v-if="!businessLicenseId" size="small" style="background-color:#ecf5ff;color:#409eff;margin-left:-200px"><i class="el-icon-upload2" /> 上传文件</el-button>
                <el-tag v-else v-model="formData.businessLicenseUrl" type="success" style="width:93px;margin-left:-200px"><i class="el-icon-circle-check" /> 已上传</el-tag><br>
                <p>支持扩展名：.png .jpg .jpeg，文件大小不得超过5M</p>
              </el-upload>
              <span @click="visible=!visible"><i class="el-icon-view" /></span>
              <el-image
                v-if="visible"
                style="width: 100px; height: 100px"
                :src="businessLicenseUrl"
                :preview-src-list="srcList"
              />
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-row>

    <el-row type="flex" justify="center" style="margin:20px 0 0 0">
      <el-card class="box-card" style="width:1660px">
        <div slot="header" class="clearfix">
          <span>联系人信息</span>
        </div>
        <div style="margin:20px 130px">
          <el-form ref="refForm" label-width="100px" :rules="rules" :model="formData">

            <el-row type="flex" justify="space-around">
              <el-form-item label="企业联系人" style="margin-left:20px" prop="contact">
                <el-input v-model="formData.contact" placeholder="请输入企业联系人" style="width:538px" />
              </el-form-item>
              <el-form-item label="联系电话" style="margin-left:20px" prop="contactNumber">
                <el-input v-model="formData.contactNumber" placeholder="请输入联系电话" style="width:538px" />
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </el-row>
    <div class="footer">
      <el-row type="flex" justify="center">
        <el-button @click="resetCard">重置</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
import { addEnterAPI, getTradeListAPI, imageUploadAPI } from '@/api/enterprise'

export default {
  data() {
    return {
      srcList: [],
      visible: false,
      fileList: '',
      tradeList: [], // 行业下拉列表
      businessLicenseUrl: '',
      businessLicenseId: null,
      formData: {
        fileList: [],
        name: '',
        legalPerson: '',
        registeredAddress: '',
        industryCode: null,
        contact: '',
        contactNumber: ''

      },
      rules: {
        name: [
          {
            required: true, message: '必填项，内容不能为空', trigger: 'blur'
          }
        ],

        legalPerson: [
          {
            required: true, message: '必填项，内容不能为空', trigger: 'blur'
          }
        ],
        registeredAddress: [
          {
            required: true, message: '必填项，内容不能为空', trigger: 'blur'
          }
        ],
        industryCode: [
          {
            required: true, message: '必填项，内容不能为空', trigger: 'blur'
          }
        ],
        fileList: [
          {
            required: true, message: '必填项，内容不能为空', trigger: 'blur'
          }
        ],
        contact: [
          {
            required: true, message: '必填项，内容不能为空', trigger: 'blur'
          }
        ],
        contactNumber: [
          {
            required: true, message: '请输入联系电话', trigger: 'blur'
          },
          {
            pattern: /^1[34578]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur'
          }
        ]
      }
    }
  },
  async created() {
    const res = await getTradeListAPI()
    // console.log(res)
    this.tradeList = res.data
  },
  methods: {

    // 上传文件的校验格式
    beforeUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('上传的图片不能超过5MB哦！')
        return false
      }
      if (['image/png', 'image/jpg', 'image/jpeg'].indexOf(file.type) === -1) {
        this.$message.error('请上传正确的图片格式')
      }
    },
    // 自定义上传
    async imageUpload(file) {
      // new一个formDatas
      const formDatas = new FormData()
      // 文件追加到实例对象中
      await formDatas.append('file', file.file)
      // 将类型追加到实例对象中
      await formDatas.append('type', 'businessLicense')
      // 调上传接口
      const res = await imageUploadAPI(formDatas)
      console.log(res.data)
      // 将id赋值 因为要做判断
      this.businessLicenseId = res.data.id
      this.businessLicenseUrl = res.data.url // 发送添加请求的时候需要
      this.srcList.push(this.businessLicenseUrl)
      // 提示用户
      this.$message.success('上传图片成功')
    },
    // 图片上传成功回调函数
    handleAvatarSuccess(file, fileList) {
      console.log(file, 1)
      console.log(fileList, 2)
      this.formData.fileList = fileList
    },
    // 重置信息
    resetCard() {
      this.$refs.formRef.resetFields()
      this.$refs.refForm.resetFields()
    },
    // 提交
    async onSubmit() {
      this.$refs.formRef.validate()
      this.$refs.refForm.validate()
      // 添加
      await addEnterAPI({
        name: this.formData.name,
        legalPerson: this.formData.legalPerson,
        registeredAddress: this.formData.registeredAddress,
        industryCode: this.formData.industryCode,
        businessLicenseUrl: this.businessLicenseUrl,
        businessLicenseId: this.businessLicenseId,
        contact: this.formData.contact,
        contactNumber: this.formData.contactNumber
      })
      this.$message.success('新增成功')
      // 直接返回
      window.history.go(-1)
    },
    // 返回上一页
    fn() {
      window.history.go(-1)
    }
  }
}
</script>

<style scoped>
  .header-hm{
    height: 64px;
    padding: 20px 10px;
    background-color: #fff;
  }
.footer{
background-color: #fff;
  position: fixed; /* 或者使用 absolute，取决于你的需求 */
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  width: 100%; /* 占据整个页面宽度 */
  height: 80px; /* 或者你想要的任何高度 */
  padding:20px 0;
  z-index: 9999; /* 确保元素显示在其他内容之上 */
}
.header-two{
      min-height: 100vh; /* 视口高度 */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  background-color:#f4f6f8 ;
}
</style>
